<template>
  <div class="body">
    <el-row type="flex" class="row-bg">
      <el-col :span="8" :offset="3">
        <div class="user">
          <img class="avatar" :src="userInfo.img">
          <div class="useritem">{{ userInfo.userName }}</div>
          <div class="useritem">{{ userInfo.description }}</div>
          <el-button style="margin-top: 10px ; font-size: 15px;" size="mini" plain @click="toChangepage"><i
              class="el-icon-setting" style="margin-right: 5px;"></i>修改个人信息</el-button>
        </div>
      </el-col>
      <el-col :span="16">
        <el-form :inline="true">
          <el-row :gutter="0" style="height: 60px; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
            <el-col :span="10" style="padding-top: 10px;padding-left:50px ;">
              <el-form-item label="订单类型">
                <el-select v-model="searchMap.status" placeholder="请选择订单类型" style="padding-left: 10px;">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="14" style="padding-top: 10px">
              <el-form-item label="搜索订单" style="">
                <el-input v-model="searchMap.hotelName" placeholder="" style="width: 150px;"></el-input>
              </el-form-item>
              <el-button @click="search">搜索</el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-col>
          <div>
            <el-table :data="ordersInfo" border
              style="width: 100% ;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
              <el-table-column fixed prop="createTime" label="时间" width="200">
              </el-table-column>
              <el-table-column prop="hotelName" label="酒店" width="120">
              </el-table-column>
              <template>
                <el-table-column label="状态" slot-scope="scope">
                  {{ statusDescription(scope.row) }}
                </el-table-column>
              </template>
              <el-table-column prop="addr" label="地址" width="180">
              </el-table-column>
              <el-table-column prop="roomName" label="房间" width="120">
              </el-table-column>
              <el-table-column prop="roomPrice" label="价格" width="120">
              </el-table-column>
              <el-table-column prop="statusInfo" label="状态" width="120">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                  <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="block">
              <el-pagination layout="prev, pager, next" :total="50">
              </el-pagination>
            </div>
          </div>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>
<style>
.body {
  margin-top: 20px;
  margin-right: 10%;
}

.orders {
  width: 80%;
  margin-left: 10%;
}

.avatar {
  width: 150px;
  border-radius: 50%;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

.user {
  width: 300px;
  text-align: center;
}

.useritem {
  margin-top: 10px;
}
</style>

<script>
import { _getUserById } from '../../../api/user';
import { _getOrdersById } from '../../../api/user';
import { _searchList } from '../../../api/user';
export default {
  name: 'personal-center',
  data() {
    return {
      userInfo: [],
      ordersInfo: [],
      order: {},
      input: '',
      description: [],
      searchMap: {
        userId: 1,
        status: '',
        hotelName: '',
      },
      options: [{
        value: 0,
        label: '未支付'
      }, {
        value: 1,
        label: '已支付'
      }, 
      {
        value: 2,
        label: '交易完成'
      }, 
      {
        value: 3,
        label: '订单取消'
      }, {
        value: 4,
        label: '已退款/取消'
      }, 
      {
        value: 5,
        label: '申请退款'
      }, 
      {
        value: 6,
        label: '已完成'
      }
      ],
      value: '',
    };
  },
  computed: {

  },
  watch: {
    ordersInfo() {
      for (let i = 0; i < this.ordersInfo.length; i++) {
        this.ordersInfo[i].createTime = this.DateFormat(this.ordersInfo[i].createTime)
        this.$set(this.ordersInfo[i], 'statusInfo', this.statusDescription(this.ordersInfo[i].status))
      }
    }
  },
  methods: {
    search() {
      _searchList(this.searchMap).then((res) => {
        this.ordersInfo = res.data
        // console.log(this.ordersInfo)
      })
      // console.log(this.searchMap)
    },
    padDate(value) {
      return value < 10 ? '0' + value : value
    },
    //时间格式化
    DateFormat(value) {
      // 根据给定的字符串，得到特定的日期
      var date = new Date(value);
      var year = date.getFullYear();
      var month = this.padDate(date.getMonth() + 1);
      var day = this.padDate(date.getDate());
      var hour = this.padDate(date.getHours());
      var min = this.padDate(date.getMinutes());
      var sec = this.padDate(date.getSeconds());
      return `${year}-${month}-${day} ${hour}:${min}:${sec}`;
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClick(row) {
      this.$router.push({ name: "lookOrder", query: { orderId: row.orderId } });
      console.log(row.orderId);
    },
    toChangepage() {
      this.$router.push({
        name: "changeInformation", query: {
          userId: this.searchMap.userId
        }
      })
    },
    statusDescription(value) {
      switch (value) {
        case 0: return "未支付"
        case 1: return "已支付"
        case 2: return "交易完成"
        case 3: return "订单取消"
        case 4: return "已退款"
        case 5: return "申请退款"
        case 6: return "订单完成"
      }
    }
  },
  mounted() {
    _getUserById(this.searchMap.userId).then(res => {
      this.userInfo = res.data
    })
    _getOrdersById(this.searchMap.userId).then(res => {
      this.ordersInfo = res.data
    })
  },
};
</script>
